HTML code, or Use your theme's Button - DO NOT FORGET TO ADD THE CLASS
----------------------------------------

<a href="https://app-link-android.com" class="android-app">
  <img src="imagelink.png" alt="Android App">
</a>

<a href="https://app-link-ios.com" class="ios-app">
  <img src="imagelink.png" alt="iOS App">
</a>

----------------------------------------

/*Add this to theme functions */
function custom_device_detection_script() {
    ?>
    <style>
        .android-app, .ios-app {
            display: inline-block; 
        }

        @media (max-width: 991px) {
            .android-app, .ios-app {
                display: none; 
            }
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            if (window.innerWidth <= 991) {
                const testBrowser = function(regexp) {
                    return regexp.test(window.navigator.userAgent);
                }

                if (testBrowser(/Android/i)) {
                    $('.android-app').css('display', 'inline-block');
                    console.log("Android detected");
                } else if (testBrowser(/iPhone|iPad|iPod/i)) {
                    $('.ios-app').css('display', 'inline-block');
                    console.log("iOS detected");
                }
            } else {
                console.log("Viewport width greater than 991px");
            }
        });
    </script>
    <?php
}
add_action('wp_head', 'custom_device_detection_script');
